import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Collapse from "components/Collapse";

<Meta title="Components/Collapse" component={Collapse} />

# Collapse

## Props

<Props of={Collapse} />

## Examples

### Basic

Basic usages for ``Collapse`` component.

<Preview>
  <Story name="basic collapse">
    <div style={{ padding: 20 }}>
      <Collapse accordion defaultActiveKey={['p1']} style={{ boxShadow: '0 4px 16px 0 rgba(39, 50, 71, 0.28)' }}>
        <Collapse.CollapseItem label="Paragraph-1" key="p1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec purus a lacus placerat sodales ac a ante. Suspendisse mi dolor, facilisis sed cursus ac, dapibus eu orci. Vivamus commodo ullamcorper elit et luctus. Cras dapibus eros eu ante dapibus, in malesuada sapien scelerisque. Etiam mollis consectetur dapibus. Quisque tincidunt mi erat. Cras suscipit mi ac euismod euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis elementum, erat at tristique porttitor, purus tortor maximus mauris, sit amet tristique lectus lectus nec arcu. Vestibulum tempus velit urna, quis mattis ex pharetra at. Phasellus ac malesuada ante, eget elementum orci. Quisque vel odio mi.
        </Collapse.CollapseItem>
        <Collapse.CollapseItem label="Paragraph-2" key="p2">
          Sed in maximus lectus. Suspendisse consectetur, magna non interdum dapibus, magna purus euismod dui, at vestibulum neque libero eu metus. Duis quis mauris orci. Mauris id nisl dolor. Pellentesque suscipit nisl quis lacus aliquam rutrum. Ut ac tellus ultrices, commodo est sed, condimentum leo. Fusce posuere eleifend sem, sed fermentum nibh euismod non. Vivamus ac lorem faucibus, tristique tortor nec, tempus magna. Morbi bibendum pretium sem in blandit. Suspendisse sed imperdiet ante, ac tincidunt ante. Duis quis libero efficitur, tempor urna quis, feugiat purus. Vestibulum sit amet ipsum tincidunt, pellentesque nulla id, feugiat orci. Pellentesque rhoncus dui metus, sollicitudin luctus mauris gravida vel. Phasellus vitae placerat ex. Pellentesque eget sollicitudin ipsum. Vestibulum placerat, diam et varius sodales, leo velit consectetur urna, a viverra nulla nunc nec enim.
        </Collapse.CollapseItem>
        <Collapse.CollapseItem label="Paragraph-3" key="p3">
          Duis sit amet sem eu ante posuere scelerisque. Curabitur tempus quis turpis a dignissim. Suspendisse malesuada at sem quis imperdiet. Suspendisse potenti. Ut fringilla urna a cursus tincidunt. Duis non odio dui. Duis aliquam justo in scelerisque venenatis. Etiam ligula dolor, convallis ut interdum nec, condimentum vitae massa. Sed at odio vulputate, bibendum lorem quis, lacinia justo.
        </Collapse.CollapseItem>
        <Collapse.CollapseItem label="Paragraph-4" key="p4">
          In vitae rhoncus lectus. Morbi at venenatis nunc. Mauris placerat nibh vel sem vulputate, vel porttitor libero fringilla. In orci mi, semper ac neque non, consectetur fermentum tellus. Pellentesque ut ligula convallis, fringilla magna non, consectetur lectus. Morbi vehicula sapien nec dapibus convallis. Maecenas suscipit, justo at vestibulum varius, dui augue cursus dolor, et iaculis dolor nunc ut leo.
        </Collapse.CollapseItem>
      </Collapse>
    </div>
  </Story>
</Preview>
